class Fdj{



        constructor(el){
            this.el = document.querySelector(el)
            this.enlargeObj = this.el.querySelector('.enlarge')
            this.imgObj = this.el.querySelector('.img')
            this.maskObj = this.el.querySelector('.mask')
            this.init()
        }

        init(){
            this.overout()
            this.pagsmove()
           this.enlargeSetWH()
           this. lidown()
        }
        // 鼠标移入
        overout(){
            this.imgObj.onmouseover=()=>{
                this.maskObj.style.display =   this.enlargeObj.style.display = 'block'
            }
            this.imgObj.onmouseout=()=>{
                this.maskObj.style.display =   this.enlargeObj.style.display = 'none'
            }
        }  

        // 鼠标移动
        pagsmove(){
            this.imgObj.onmousemove=(evt)=>{
                    let e = evt || window.event
                    let left = e.pageX-this.imgObj.parentNode.offsetLeft- this.maskObj.offsetWidth/2
                    let top = e.pageY-this.imgObj.parentNode.offsetTop- this.maskObj.offsetHeight/2
                 
                    
                    let maxleft =  this.imgObj.clientWidth-this.maskObj.offsetWidth
                    let maxtop =  this.imgObj.clientHeight-this.maskObj.offsetHeight
                    if(left<0)left=0
                    if(top<0)top=0
                    if(left>maxleft)left=maxleft
                    if(top>maxtop)top=maxtop
                    this.maskObj.style.left = left+'px'
                    this.maskObj.style.top= top+'px'
                    this.tbenlarge(left,top)

            }


        }

        // 同步放大图片
        tbenlarge(left,top){

            let enlargeW = parseFloat(this.getStyle(this.enlargeObj, 'width'))
            let enlargeH = parseFloat(this.getStyle(this.enlargeObj, 'height'))
            let maskW = parseFloat(this.getStyle(this.maskObj, 'width'))
            let maskH = parseFloat(this.getStyle(this.maskObj, 'height'))

            let x = (enlargeW/maskW)*left
            let y = (enlargeH/maskH)*top
            this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`
           


        }
        getStyle(tagObj, attrName) 
        {
            if (window.getComputedStyle)
            {
                // return window.getComputedStyle(tagObj).attrName
                return window.getComputedStyle(tagObj)[attrName]
            } else {
                // return tagObj.currentStyle.attrName
                return tagObj.currentStyle[attrNamea]  // 当对象的键是变量时，使用数组语法
            }
        }
    
        enlargeSetWH()
        {
            // div.enlarge w = div.mask w * (div.enlarge background / div.img background )
            // div.enlarge h = div.mask h * (div.enlarge background / div.img background )
    
            let maskW = parseInt(this.getStyle(this.maskObj, 'width'))
            let maskH = parseInt(this.getStyle(this.maskObj, 'height'))
            // 留心：offsetWidth、offsetHeight不能获取隐藏元素
    
            let enlarge = this.getStyle(this.enlargeObj, 'background-size')
            let enlargeW = parseInt( enlarge.split(' ')[0])
            let enlargeH = parseInt( enlarge.split(' ')[1])
    
            let imgW = this.imgObj.clientWidth
            let imgH = this.imgObj.clientWidth
    
            this.enlargeObj.style.width = maskW * (enlargeW / imgW) + 'px'
            this.enlargeObj.style.height = maskH * (enlargeH / imgH)  + 'px'
        }

        lidown(){
           let ulliobj= this.el.querySelectorAll('ul li')
           ulliobj.forEach((item,i)=>{
                    item.onmousedown=()=>{
                        this.el.querySelector('ul li.active').className = ''
                        ulliobj[i].className = 'active'
                        this.imgObj.style.background = `url(./imgs2/${i+1}.jpg)`
                        this.enlargeObj.style.background = `url(./imgs2/${i+1}.big.jpg)`
                    }


           })


        }
}
